<template>
	<!-- 我的订单界面 -->
	<view class="content">
		<van-tabs @click="tabsli" tab-active-class="tab-active-class" @change="activeval" :active="active" title-active-color="#ef3646" line-width="30rpx">
			<van-tab title="全部订单">
				<!-- 空状态 -->
				<view class="order_kong_box">
					<van-empty>
						<slot>
							<view class="order_kong">
								<text class="order_kong_top">您还没有相关的订单</text>
								<text class="order_kong_botton">可以去看看有没有相买的</text>
							</view>
						</slot>
					</van-empty>
				</view>
			</van-tab>
			<van-tab title="待支付">
				<!-- 空状态 -->
				<view class="order_kong_box">
					<van-empty>
						<slot>
							<view class="order_kong">
								<text class="order_kong_top">您还没有相关的订单</text>
								<text class="order_kong_botton">可以去看看有没有相买的</text>
							</view>
						</slot>
					</van-empty>
				</view>
			</van-tab>
			<van-tab title="待发货">
				<!-- 空状态 -->
				<view class="order_kong_box">
					<van-empty>
						<slot>
							<view class="order_kong">
								<text class="order_kong_top">您还没有相关的订单</text>
								<text class="order_kong_botton">可以去看看有没有相买的</text>
							</view>
						</slot>
					</van-empty>
				</view>
			</van-tab>
			<van-tab title="待收货">
				<!-- 空状态 -->
				<view class="order_kong_box">
					<van-empty>
						<slot>
							<view class="order_kong">
								<text class="order_kong_top">您还没有相关的订单</text>
								<text class="order_kong_botton">可以去看看有没有相买的</text>
							</view>
						</slot>
					</van-empty>
				</view>
			</van-tab>
			<van-tab title="待评价">
				<!-- 空状态 -->
				<view class="order_kong_box">
					<van-empty>
						<slot>
							<view class="order_kong">
								<text class="order_kong_top">您还没有相关的订单</text>
								<text class="order_kong_botton">可以去看看有没有相买的</text>
							</view>
						</slot>
					</van-empty>
				</view>
			</van-tab>
		</van-tabs>
		
		
		<!-- 你可能还喜欢 -->
		<index-list>
			<!-- 标题 -->
			<view class="tuijian">
				<text class="tuijian_1"></text>
				<text class="tuijian_2"></text>
				<text class="tuijian_3"></text>
				<text class="tjtitle">为您推荐</text>
				<text class="tuijian_3"></text>
				<text class="tuijian_2"></text>
				<text class="tuijian_1"></text>
			</view>			
			<!-- 商品列表 -->
		</index-list>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 当前激活的标签,默认0
				active:0,
				// 选择的页面
				home:{
					index:0,
					title:"全部订单"
				}
			}
		},
		onLoad(index) {
			this.active=Number(index.index)
		},
		methods:{
			// 当前点击的tab
			tabsli(tab){
				this.home=tab.detail
				// console.log(tab)
			},
			// 当被激活状态改变时触发
			activeval(val){
				this.home=val.detail
			}
		}
	}
</script>

<style>
	page{
		width: 750rpx;
		height: 100%;
		background-color: #F3F3F3;
	}
	.tab-active-class{
		font-weight: 800!important;
	}
	
	.order_kong_box{
		margin-top: -70rpx;
	}
	.order_kong{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.order_kong_top{
		font-size: 28rpx;
		color: #333333;
	}
	.order_kong_botton{
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}
	
	.tuijian{
		font-size: 26rpx;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}
	text[class^="tuijian"]{
		background: red;
		border-radius: 50%;
		margin: 0 10rpx;
	}
	.tjtitle{
		background-color:#f7f7f7 ;
	}
	.tuijian_1{
		padding: 4rpx;
	}
	.tuijian_2{
		padding: 6rpx;
	}
	.tuijian_3{
		padding: 8rpx;
	}
</style>
